<template>
	<view class="app-index">
		<view class="seach-box">
			<view class="input-item flex align-center">
				<view class="iconfont icon-sousuo icon"></view>
				<input class="input" v-model="vedioCondition.videoName" @confirm="searchHandler" type="text"
					maxlength="30" />
				<!-- 清空按钮 -->
				<view class="clean-symbol" v-if="vedioCondition.videoName" @click="clearInput">×</view>
			</view>
			<view class="seach-btn">
				<button type="default" @click="searchHandler">
					搜索
				</button>
			</view>
		</view>

		<view class="viedo_list">
			<view class="vedio_item" v-for="item in videoData" :key="item.id">
				<image :src="item.videoCover" mode="scaleToFill" @click="gotToVideoDetial(item.id)" />
				<view class="name">
					<text class="vedio_name" @click="gotToVideoDetial(item.id)">{{ item.videoName }}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { loadMedia } from '@/api/media/media'

export default {
	data() {
		return {
			showClearIcon: false,
			vedioCondition: {
				videoName: '',
				loadCount: 60
			},
			videoData: undefined
		}
	},

	onLoad() {
		this.handload()
	},

	onPullDownRefresh() {
		console.log('refresh');
		this.handload()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	onReachBottom() {
		// console.log('页面触底');
		this.vedioCondition.loadCount += 3
		// 查询数据
		this.handload()
	},

	methods: {
		gotToVideoDetial(id) {
			uni.navigateTo({
				url: '/pages/video/video?id=' + id
			});
		},

		handload() {
			loadMedia(this.vedioCondition).then(res => {
				this.videoData = res.data
			})
		},

		searchHandler() {
			this.handload()
		},

		// 清空方法
		clearInput() {
			// 将输入框的值设置为空
			this.vedioCondition.videoName = '';
			// 查询数据
			this.handload()
		}
	}
}
</script>

<style lang="scss">
.app-index {
	// background-color: #0a0202;

	.viedo_list {
		background-color: #eee;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: center;
		// justify-content: space-between;

		.vedio_item {
			// width: 355rpx;
			width: 235rpx;
			margin: 4px;
			// text-align: center;

			image {
				height: 120px;
				width: 100%;				
				border-radius: 10%;
			}

			.vedio_name {
				text-align: left;
			}
		}
	}

	.seach-box {
		display: flex;

		/* #ifdef MP-WEIXIN */
		// margin-top: 65px;
		/* #endif */

		/* #ifdef APP-IOS */
		margin-top: 0px;
		/* #endif */
		margin-left: 10px;
		margin-right: 10px;

		.input-item {
			width: 80%;
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;
			margin-right: 5px;
			// background-color: red;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

			.clean-symbol {
				font-size: 18px;
				margin-right: 15px;
			}
		}

		.seach-btn {
			border-radius: 30px;
			margin: 20px auto;
			margin-left: 10px auto;
			width: 20%;
			font-size: 14px;
			text-align: center;
			background-color: #f5f6f7;
		}
	}
}
</style>